<link rel="stylesheet" href="/CSS/editEncyclopedia.css">

<style>
    .table .name {
        background-color: #fff;
        width: 120px;
    }

    .container {
        width: 470px;
    }
</style>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;text-align: center;">
        <legend><i class="fa fa-file-text-o"></i> 专 题 </legend>
        <span style="color:rgb(172, 168, 168);"> 注意：表格中带<span style="color: red;">*</span>为必填项</span><br>
        <input type="text" name="showSortId" style="border: none;color:rgb(172, 168, 168);width: 320px;">
        <!-- <span style="color:rgb(172, 168, 168);" id="showSortId" name="showSortId"> </span> -->
    </fieldset>

    <div class="container">
        <form class="layui-form">
            <!-- 表单 -->
            <ul class="table flex-c-j">
                <li class="top flex">
                    <!-- 左侧输入框 -->
                    <ul class="form flex-column-s">
                        <li class="one">
                            <span class="name">所属专题集：</span>
                            <div class="textbox">
                                <input type="text" name="ztjName" id="ztjName" autocomplete="off" class="layui-input"
                                    style="color:rgb(95, 94, 94);height:34px;width:320px;margin-left: 10px;" disabled>
                            </div>
                        </li>
                        <div class="layui-form-item" hidden>
                            <label class="layui-form-label">专题集ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="ztjId" id="ztjId" lay-verify="required" readonly
                                    autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <li class="one">
                            <span class="name">名称<span style="color: red;">*</span>：</span>
                            <div class="textbox">
                                <input type="text" name="name" autocomplete="off" class="layui-input"
                                    style="height:34px;width:320px;margin-left: 10px;" lay-verify="required"
                                    lay-reqText="专题名称不能为空！" placeholder="请输入专题名称">
                            </div>
                        </li>
                        <li class="one">
                            <span class="name">专题序号：</span>
                            <div class="textbox">
                                <input type="number" name="sortId" autocomplete="off" class="layui-input"
                                    style="height:34px;width:320px;margin-left: 10px;" placeholder="输入专题序号"
                                    onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                    onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}">
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <div hidden>
                <input type="text" name="id">
                <input type="text" name="sysID">
                <input type="text" name="beforeSortId">
                <input type="text" name="maxSortId">
            </div>
        </form>
    </div>
    <script>
        //编辑页面
        var parent_json = parent.onClickData;
        $(function () {
            if (parent.opreatType == "add") {
                var maxSortId = parseInt(parent.maxSortId) + 1;
                $("input[name='ztjId']").val(parent_json.id)
                $("input[name='ztjName']").val(parent_json.name)
                $("input[name='beforeSortId']").val(maxSortId)
                $("input[name='maxSortId']").val(maxSortId)
                $("input[name='sortId']").val(maxSortId)
                $("input[name='showSortId']").val("序号范围：1~" + maxSortId + "，若序号已存在，则交换序号")
            }
            // 编辑
            if (parent.opreatType == "edit") {
                $("input[name='ztjId']").val(parent_json.ztjId)
                $("input[name='ztjName']").val(parent_json.ztjName)
                $("input[name='id']").val(parent_json.id)
                $("input[name='sortId']").val(parent_json.sortId)
                $("input[name='maxSortId']").val(parseInt(parent.maxSortId) )
                $("input[name='beforeSortId']").val(parent_json.sortId)
                $("input[name='name']").val(parent_json.name)
                $("input[name='createTime']").val(parent_json.createTime)
                $("input[name='updateTime']").val(parent_json.updateTime)
                $("input[name='showSortId']").val("序号范围：1~" + parent.maxSortId + "，若序号已存在，则交换序号")
            }
        })

        //渲染页面
        layui.form.render();

        //渲染日期插件
        lay('.date').each(function () {
            layui.laydate.render({
                elem: this,//元素
            });
        });
    </script>
</body>

</html>